import { Calendar, Datebox } from '../imports';
import { bar } from '../style.css';

export function CalendarPage() {
	return (
		<>
			<h2>日历</h2>
			<div class={bar}></div>
			<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
				<Calendar
					mode="year"
					range
					min={new Date('2022-01-01')}
					onPick={function () {
						console.log(this.text);
					}}
				/>
				<Calendar
					mode="month"
					range
					min={new Date('2022-02-01')}
					onPick={function () {
						console.log(this.text);
					}}
				/>
				<Calendar
					mode="date"
					min={new Date('2022-01-01')}
					max={new Date('2025-5-20')}
					onPick={function () {
						console.log(this.text);
					}}
				/>
				<Calendar
					mode="date"
					disabled
					range
					min={new Date('2024-01-01')}
					max={new Date('2025-5-20')}
					onPick={function () {
						console.log(this.text);
					}}
				/>
			</div>
			<div class={bar}>
				<Datebox />
				<Datebox mode="dm" dateValue={new Date(2025, 2, 28)} minDate={new Date('2024-12-20')} />
				<Datebox mode="dd+ts" />
				<Datebox mode="dd" range minDate={new Date('2024-12-20')} maxDate={new Date('2025-12-15')} />
			</div>
		</>
	);
}
